<template>
  <div>
      <Title title="人员数据分析"></Title>
      <el-row>
          <el-col :span="11"  >
              <div ref="boxone" class="box">

              </div>
          </el-col>
          <el-col :span="11" :offset="1"  >
              <div ref="boxtwo" class="box">

              </div>
          </el-col>
      </el-row>
  </div>
</template>

<script lang="ts" setup >
import * as echarts from 'echarts'  // 下载导入echarts 
import {ref , reactive, onMounted } from 'vue'
import { Ajax } from '@/api';
// 纠结 ref
// reactive 
// toRef
// toRefs 
const boxone = ref<any>()
const boxtwo = ref<any>()

const oneChartInit = ()=>{
  var myChart = echarts.init(boxone.value);
  var option;

  option = {
      title: {
          text: '人员比例分析',
          subtext: '模拟假数据',
          left: 'center'
      },
      tooltip: {
          trigger: 'item'
      },
      legend: {
          orient: 'vertical',
          left: 'left'
      },
      series: [
          {
          name: '数据来源',
          type: 'pie',
          radius: '50%',
          data: [
              { value: 1048, name: 'WH2212' },
              { value: 735, name: 'WH2209' },
              { value: 580, name: 'WH2206' },
              { value: 484, name: 'WH2204' },
              { value: 300, name: 'WH2201' }
          ],
          emphasis: {
              itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          }
          }
      ]
  };
  option && myChart.setOption(option);
}

const twoChartInit = async ()=>{
  let res:any  = await Ajax.getrolelist({})
  let res1:any  = await Ajax.userlist({})
  let userList = res1.result
  let roleList = res.result
  var myChart = echarts.init(boxtwo.value);
  var option;

  var data:any = []
  roleList.forEach((item:any)=>{
      data.push({
          value:userList.filter((v:any)=>v.role==item.value).length ,//length就是有几个
          name:item.label
      })
  })
  console.log(userList)
  // roleList 
  // userList 
  option = {
      tooltip: {
          trigger: 'item'
      },
      legend: {
          top: '5%',
          left: 'center'
      },
      series: [
          {
          name: '从以下位置访问',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
          },
          label: {
              show: false,
              position: 'center'
          },
          emphasis: {
              label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
              }
          },
          labelLine: {
              show: false
          },
          data: data,
          }
      ]
  };
  option && myChart.setOption(option);
}

onMounted(()=>{
  oneChartInit()
  twoChartInit()
})
</script>


<style lang="scss">
.box{
  border:1px solid #ddd;
  border-radius: 15px;
  min-height:450px;
  padding-top:15px;
}
</style>